<template>
	<view class="content">
		<view style="display: flex;align-items: center;margin-top: 107rpx;width: 100%;padding: 40rpx;">
			<image :src="user.avatar" style="width: 150rpx;height: 150rpx;border-radius: 16rpx;" mode=""></image>
			<view
				style="margin-left: 20rpx; display: flex;flex:1;flex-direction: column;height: 150rpx;justify-content: space-between;">
				<view
					style=" font-size: 40rpx;font-weight: bold;width: 100%;display: flex;justify-content: space-between;">
					<text>{{user.name}}</text>
				</view>
				<view style="display: flex;align-items: center;">
					<image src="/static/images/icon_phone.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
					<text style="color: #8a8a8a;">
						{{user.phone}}
					</text>
				</view>
				<view style="display: flex;align-items: center;color: #8a8a8a;">
					<text v-if="!user.note">未设置签名~</text>
					<text style="color: #8a8a8a;">
						{{user.note}}
					</text>
				</view>
			</view>
		</view>

		<view style="width: 700rpx;background: #fff;border-radius: 16rpx;margin-bottom: 25rpx;">
			<toolbar />
		</view>

		<view
			style="width: 700rpx;display: flex;flex-direction: column;background: none;border-radius: 12rpx;">
			
			<cellitem background="white" :action="mypyq" icon="/static/images/icon_pyqx.png" name="朋友圈" />
			<cellitem background="white" :action="addmtrm" icon="/static/images/icon_hyb.png" name="会议室" />
			<cellitem background="white" :action="setName" icon="/static/images/icon_mp.png" name="更改昵称" />
			<cellitem background="white" :action="uploadAvatar" icon="/static/images/icon_txup.png" name="上传头像" />
			
		</view>
		
		<view
			style="width: 700rpx;display: flex;flex-direction: column;background: none;border-radius: 12rpx;margin-top: 50rpx;">
			<cellitem background="white" :action="restart" icon="/static/images/icon_refk.png" name="刷新" />
			<cellitem background="white" :action="logout" icon="/static/images/icon_exitx.png" name="退出" />
			
		</view>

		
		<!-- <view style="width: 500rpx;margin: auto;">
			<u-button @click="logout">退出</u-button>
		</view> -->

		<u-popup @close="closePop" v-model="showChangeName" mode="center" border-radius="16">
			<view style="padding: 30rpx;display: flex;flex-direction: column;width: 600rpx;">
				<view style="margin: 10rpx 0rpx 20rpx 0rpx;font-weight: 500;font-size: 36rpx;">
					更改昵称
				</view>
				<u-input v-model="name" type="text" :border="true" />
				<view style="margin: 30rpx auto 10rpx auto;font-weight: 500;">
					<u-button @click="changeName" shape="circle" type="primary" size="medium">确定</u-button>
				</view>
			</view>
		</u-popup>


		

		<u-tabbar></u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import auth from '../../utils/auth.js'
	import util from '../../utils/index.js'
	import cellitem from './components/cellitem.vue'
	import toolbar from './components/toolbar.vue'

	export default {
		data() {
			return {
				tstyle:{
					fontWeight:450,
					fontSize:"28rpx"
				},
				showChangeName: false,
				name:''
			}
		},
		components: {
			cellitem,
			toolbar
		},
		computed: {
			...mapState({
				user: state => {
					return state.user.user
				}
			})
		},
		async onShow() {
			
		},
		methods: {
			restart:function(){
				plus.runtime.restart()
			},
			addmtrm:async function(){
				uni.switchTab({
					url:"/pages/meeting/index"
				})
				// 判断是否有权限
				// const ret = await this.$u.get('common/common/getCreateRoomAu',{id:this.user.id})
				// if(ret){
				// 	uni.navigateTo({
				// 		url:
				// 	})
				// }
			},
			mypyq:function(){
				uni.navigateTo({
					url:"/pages/user/mypyq/index"
				})
			},
			uploadAvatar: function(){
				const _this = this
				uni.chooseImage({
					count:1,
					success: async function(e) {
						uni.showLoading({
							title:'上传中..'
						})
						const filePath = e.tempFilePaths[0]
						const ret = await util.uploadImage(filePath)
						
						if(ret.success){
							console.log(22,ret.data.pathname)
							_this.$store.dispatch({
								type:"user/setUserAvatar",
								payload:{
									avatar:ret.data.pathname
								}
							})
						}else{
							uni.showToast({
								title:"上传失败",
								icon:"none"
							})
						}
						uni.hideLoading()
					}
				})
			},
			setName: function() {
				this.name = this.user.name
				this.showChangeName = true
			},
			changeName: function() {
				console.log(this.name)
				this.$store.dispatch({
					type:"user/setUserName",
					payload:{
						name:this.name
					}
				})
				this.showChangeName = false
			},
			closePop: function() {
				this.name = this.user.name
			},
			logout: function() {
				this.$event.pub(`logout`, {})
				this.$socket.send({
					type: "logout",
					data: {}
				})
				this.$store.commit({
					type: "user/clearUserState",
					payload: {}
				})
				auth.removeAuthorization()
				uni.redirectTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(to bottom, #e6eafa, #fff);
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		background: linear-gradient(to bottom, #e6eafa, #fff);
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}

	.button-demo {
		margin-top: 80rpx;
	}

	.link-demo {
		margin-top: 80rpx;
	}
</style>